<template>
  <div>
    <el-button @click="fetchAddresses" type="primary">刷新地址列表</el-button>
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="receiver" label="收货人" width="120" />
      <el-table-column prop="phone" label="电话" width="150" />
      <el-table-column prop="province" label="省" width="100" />
      <el-table-column prop="city" label="市" width="100" />
      <el-table-column prop="district" label="区县" width="120" />
      <el-table-column prop="detail" label="详细地址" />
      <el-table-column prop="isDefault" label="默认地址" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.isDefault === 1" type="success">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
    </el-table>
    
    <!-- 空数据提示 -->
    <div v-if="tableData.length === 0 && !loading" class="empty-tip">
      <el-empty description="暂无地址数据" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from '@/http/request'; // 使用您配置的axios实例
import { useLoginStore } from '@/stores/LoginStore';

// 定义地址数据类型
interface Address {
  id: number;
  userId: number;
  receiver: string;
  phone: string;
  province: string;
  city: string;
  district: string;
  detail: string;
  isDefault: number;
  createTime: string;
}

const tableData = ref<Address[]>([]);
const loading = ref(false);
const loginStore = useLoginStore();

// 获取地址列表
const fetchAddresses = async () => {
  loading.value = true;
  try {
    // 使用配置的axios实例，它会自动添加/api前缀和token
    const response = await axios.get(`/useraddress/list?userId=1`);
    
    console.log('响应数据:', response.data);
    
    if (response.data && Array.isArray(response.data)) {
      tableData.value = response.data;
      ElMessage.success(`获取到 ${response.data.length} 条地址数据`);
    } else {
      tableData.value = [];
      ElMessage.warning('暂无地址数据');
    }
  } catch (error: any) {
    console.error('获取地址列表失败:', error);
    ElMessage.error('获取地址列表失败: ' + (error.response?.data?.msg || error.message));
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchAddresses();
});
</script>

<style scoped>
.empty-tip {
  text-align: center;
  padding: 40px 0;
}
</style>